<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.subjectEditorValue" :height="200" />
      </div>
    </el-row>
    <el-row class="tigan" style="align-items: center;">
      <span>评测语言：</span>
      <el-select v-model="modelValue.yuyinType" placeholder="请选择评测类型">
        <el-option label="中文" value="中文" />
        <el-option label="英文" value="英文" />
      </el-select>
      <span style="color: red;">&nbsp;&nbsp;&nbsp;重要提示：请根据试题所用语言选择测评语言，否则语音题无法正确答题</span>
    </el-row>
    <!-- <el-row>
        试题答案：
        <div class="editorBox">
          <TinymceEditor
            ref="editor"
            v-model="modelValue.answerEditorValue"
            :height="100"
          />
        </div>
      </el-row>
      <el-row class="mt20">
        &nbsp;关&nbsp;键&nbsp;字：
        <div class="editorBox">
          <el-select
            v-model="modelValue.keyList"
            multiple
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            placeholder="回车输入关键字..."
          >
            <el-option v-for="item in modelValue.keyList" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
      </el-row> -->
    <el-row style="border-top: 1px dashed #dcdfe8;;padding-top:10px;margin-top:20px;">
      <el-col :span="4">
        <el-button type="primary" :icon="Plus" text @click="addAnalysis">添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row v-if="modelValue.explainEditorShow || modelValue.explainEditorValue.length > 0" class="jiexi2">
      试题解析：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.explainEditorValue" :height="80" />
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import {
  CirclePlus,
  Plus,
  CloseBold,
  ArrowDownBold,
  Document,
  View,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import TinymceEditor from '../component/Editor/index.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
})
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tigan {
  border-bottom: 1px dashed #dcdfe8;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
</style>